<template>
  <!-- 要实现的效果:传关键值，和展示一个卡片的显示效果就能展示其他卡片显示效果 -->
  <div class="card p-3 bg-white p-">
    <div class="card-header d-flex m-t-3 ai-center p-b-3 header-b">
      <!-- 注意class 和 :class 可以并存 -->
      <i class="iconfont m-l-2 m-r-1" :class="`icon-${icon}`"></i>
      <div class="fs-xl flex-1">{{ title }}</div>
      <i class="iconfont icon-menu m-r-2"></i>
    </div>
    <div class="card-body p-t-4">
      <div class="nav d-flex ai-center jc-between text-center">
        <!-- active 是动态添加的 ==>这里的实现方法是：判断索引值index和data里面actie的值是否相等，相等的话就赋予active类，
                从而可以实现改变active的数值而改变高亮状态-->
        <div
          tag="div"
          class="allways-item"
          :class="{ active: active === index }"
          v-for="(cate, index) in catagories"
          :key="index"
          @click="$refs.list.swiper.slideTo(index)"
        >
          {{ cate.name }}
        </div>
      </div>
      <!-- vue的ref 被定义了使用相当于使用当前元素，可以获取数据进行dom操作-->
      <!-- 定义 ref="refname"   |  使用 $refs[在scrpit里面要加this]-->
      <!-- 实行改变的方法：让active的值等于当前移动到的位置的值 -->
      <swiper
        class="m-t-3"
        ref="list"
        @slide-change="() => (active = $refs.list.swiper.realIndex)"
        :options="{ autoHeight: true }"
      >
        <!-- 循环的幻灯片数目和传进来的cateagories数目有关 -->
        <swiper-slide v-for="(cate, index) in catagories" :key="index">
          <!-- 这一段应该是要高定制化的，每个卡片的样式都不一样 ，所以用插槽-->
          <!-- 存在一个问题，用slot给父组件要怎么把cate的值传过去 -->
          <!-- 用赋值的方法把cate的值赋值到category参数中，从而使父组件能使用cate的数据 -->
          <slot name="items" :category="cate"></slot>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    icon: { type: String, required: true },
    title: { type: String, required: true },
    catagories: { type: Array, required: true },
  },
  data() {
    return {
      //高亮的索引值,从0开始
      active: 0,
    };
  },
};
</script>

<style>
</style>